<template>
	<div>
		<p>实例身上的属性分析</p>
		<div ref="helloDiv">{{ msg }}</div>
		<Son
			ref="helloSon"
			:msg="msg"
			:msg2="msg2"
			:msg3="msg3"
			@msgChange="msgChange"
		/>
		<!-- <Son :msg="msg" /> -->
	</div>
</template>
<script>
import Son from "./Son.vue";
export default {
	name: "",
	components: { Son },
	data() {
		return {
			msg: "data数据",
			msg2: 2,
			msg3: 3,
		};
	},
	mounted() {
		console.log("$data", this.$data); //Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象 property 的访问。

		console.log("$children", this.$children);
		/* 当前实例的直接子组件。需要注意 $children 并不保证顺序，
		也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定，
		考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。 */

		console.log("组件", "$refs.helloSon", this.$refs.helloSon);
		console.log("标签", this.$refs.helloDiv);
		/* 
		$refs该属性需要配合标签属性ref进行使用
		如果ref标识的是一个组件标签,那么通过$refs可以获得该组件的组件实例对象
		如果ref标识的是一个html标签,那么通过$refs可以获得该标签对应的真实DOM */
	},
	methods: {
		msgChange() {
			console.log("函数触发");
			this.msg = "已經被修改";
		},
	},
};
</script>
<style lang="" scoped></style>
